<template>
    <div class="content" style="background-color: #f5f5f5;">
        <headers></headers>
        <p class="banner padding88"></p>
        <div class="title">
            <div class="auto">首页 > 认证考试</div>
        </div>
        <div class="auto ">
            <p class="tab ">
                <a :class="examTypeId == item.id ? 'on' : ''" class="examType" :id="item.id" v-for="(item, index) in examTypeList"
                   v-on:click="chooseType(item)">{{item.examTypeName}}</a>
            </p>
        </div>
        <div class="padding250">
            <div class="auto list ">
                <ul class="clearfix">
                    <li class="list_item" v-for="item in examList" style="width: 100%;">
                        <p class="titles">{{item.examName}}</p>
                        <ul>
                            <li>报名日期：{{item.applyBeginDate}} 至 {{item.applyEndDate}}</li>
                            <li v-if="item.exanMode==1">考试方式：网络考试</li>
                            <li v-else>考试方式：线下考试</li>
                            <li>报考条件：{{item.conditionitem}}</li>
                        </ul>
                        <p class="btn"><a href="javascript:;" @click="openDetail()">考试指南</a>
                            <a href="javascript:;" @click="applyExam(item)">我要报考</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <Modal v-model="modal" width="580" class-name="vertical-center-modal">
            <p slot="header" class="header">考试须知</p>
            <div class="notice" v-html="examinationDetail">
                {{examinationDetail}}
            </div>
            <div slot="footer" style="text-align: center">
                <a href="javascript:;" @click="readDetail()" class="read">我已阅读 {{timeSent}}</a>
            </div>
        </Modal>
        <Modal v-model="modal1" width="325" class-name="vertical-center-modal">
            <p slot="header" class="header">温馨提示</p>
            <div class="notice" style="text-align: center">
                请填写完整个人信息后报名考试
            </div>
            <div slot="footer" style="text-align: center">
                <router-link to="/kaoshiAccount" class="read">去完善</router-link>
            </div>
        </Modal>
        <Modal v-model="modal2" width="325" class-name="vertical-center-modal">
            <p slot="header" class="header">温馨提示</p>
            <div class="notice" style="text-align: center">
                未满足报考要求，请检查个人信息
            </div>
            <div slot="footer" style="text-align: center">
                <router-link to="/kaoshiAccount" class="read">去检查</router-link>
            </div>
        </Modal>
        <footers></footers>
    </div>
</template>

<script type="text/ecmascript-6">
    import {getHtmlWeb, examType, userInfo, getExamlist, yzexamItem} from "../../http";
    import headers from '../template/header'
    import footers from '../template/footer'

    export default {
        name: 'kaoshi',
        props: {},
        data() {
            return {
                showOrder: 'kaoshi',
                modal: false,
                modal1: false,
                modal2: false,
                timeSent: '(10s)',
                examList: [],
                examTypeList: [],
                examinationDetail: '',
                examTypeId: '',
                userData: {}
            };
        },
        methods: {
            getKoshiDetail() {
                examType().then(res => {
                    this.examTypeList = res.data;
                    this.selectExamlist(res.data[0].id)
                    this.examTypeId = res.data[0].id
                })
            },
            chooseType(v) {
                this.examTypeId = v.id
                console.info(v)
                this.selectExamlist(v.id)
            },
            selectExamlist(v){
                getExamlist({examTypeId: v}).then(res => {
                    this.examList = res.data;
                })
            },
            getExamination() {
                getHtmlWeb({type: 'kssz'}).then(res => {
                    this.examinationDetail = res.data.html.htmlContent;
                })
            },
            openDetail() {
                let that = this
                this.modal = true
                var allTime = 10;
                function timeGo() {
                    allTime -= 1;
                    if (allTime == 0 || allTime < 0) {
                        clearInterval(timer);
                        that.timeSent = ''
                    } else {
                        that.timeSent = '(' + allTime + 's)'
                    }
                }
                var timer = setInterval(timeGo, 1000)
            },
            readDetail() {
                if (this.timeSent == '') {
                    this.modal = false
                }
            },
            //我要报考
            applyExam(v) {
                var that = this
                let id = v.examId
                let examName = v.examName
                var identityTag = this.userData.userInfo.licenseStatus
                var edutionTag = this.userData.edutionTag
                if (identityTag != 1 || edutionTag != 1 || this.userData.userInfo.address == '') {
                    that.modal1 = true
                } else {
                    yzexamItem({examId: id}).then(res => {
                        if (res.code == 200) {
                            this.$router.push({
                                name:'applyExa',
                                query: {
                                    examName: examName,
                                    examId: id,
                                    userId: that.userData.userInfo.id
                                }
                            })
                        }else{
                            this.$Notice.warning({
                                title: "考试报名提醒",
                                desc: res.info,
                                duration: 3,
                            });
                        }
                    })
                }
            },
            getUserInfo(){
                userInfo().then(res => {
                    if (res.code == 200) {
                        this.userData = res.data
                    }
                })
            }
        },
        created() {
            this.getUserInfo()
            this.getKoshiDetail()
            this.getExamination()
        },
        components: {
            headers,
            footers
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    .title {
        font-size: 14px;
        color: #fff;
        height: 52px;
        line-height: 52px;
        background-color: #2F261E;
        text-align: left;
    }

    .bgfff {
        background-color: #fff;
    }

    .tab {
        height: 80px;
        line-height: 80px;
        margin: 30px 0;
        padding-left: 50px;
        text-align: left;
        background-color: #fff;

        a {
            display: inline-block;
            position: relative;
            color: #666;
            font-size: 16px;
            margin-right: 50px;

        }

        .on {
            color: #B2936B;

            &:after {
                position: absolute;
                background-color: #B2936B;
                width: 62px;
                height: 3px;
                left: 50%;
                margin-left: -31px;
                bottom: 0;
                content: '';

            }
        }
    }

    .list {
        background-color: #fff;
        padding: 80px;
        text-align: left;

        .list_item {
            padding: 30px 70px;
            box-shadow: 0px 0px 10px #ececec;
            border-radius: 10px;
            float: left;
            margin-bottom: 30px;

            &:nth-child(2n+1) {
                margin-right: 70px;
            }

            .titles {
                font-size: 18px;
                color: #000;
            }

            ul {
                border-bottom: 1px dashed #DBDBDB;
                margin: 10px 0 15px;
                padding-bottom: 15px;

                li {
                    font-size: 14px;
                    color: #666;
                    line-height: 25px;
                }
            }

            .btn {
                text-align: center;

                a {
                    display: inline-block;
                    width: 100px;
                    height: 36px;
                    line-height: 36px;
                    border-radius: 5px;
                    font-size: 14px;

                    &:first-child {
                        border: 1px solid #999;
                        color: #999;
                        margin-right: 50px;
                    }

                    &:last-child {
                        border: 1px solid #B2936B;
                        color: #B2936B;
                    }
                }
            }
        }
    }

    .header {
        font-size: 23px;
        color: #333;
        text-align: center;
        font-weight: 700;
    }

    .notice {
        font-size: 16px;
        color: #666;
    }

    .read {
        background-color: #B2936B;
        color: #fff;
        display: inline-block;
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 5px;
        font-size: 18px;
    }
</style>
